import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Table, Button, Tag, notification } from 'antd'
import { NavLink } from 'dva/router'

export default function AuditList(props) {
    const [dataSource, setdataSource] = useState([])
    const {username}=JSON.parse(localStorage.getItem('token'))

    // 审核列表只能看到'审核中', '已通过', '未通过',  看不到未审核:在草稿箱
    const auditList = ['未审核', '审核中', '已通过', '未通过']
    // 审核列表只能看到 '未发布'（未通过+未审核+审核中）, '待发布'（已通过）
    // const publishList = ['未发布', '待发布', '已发布', '已下线']
    useEffect(()=>{
        // auditState_ne = 0 不等于0  _lte<=  _jte>=
        axios(`/news?author=${username}&auditState_ne=0&publishState_lte=1&_expand=category`).then(res=>{
            // console.log(res.data);
            setdataSource(res.data)
        })
    }, [username])

    const columns = [
        {
            title: '新闻标题',
            dataIndex: 'label',
            render: (label,item) => {
                return <NavLink to={`/news-manage/preview/${item.id}`}>{label}</NavLink>
            },
        },
        {
            title: '作者',
            dataIndex: 'author',

        },
        {
            title: '新闻分类',
            dataIndex: 'category',
            render: (category) => {
                return <div>{category.label}</div>
            },
        },
        {
            title: '审核状态',
            dataIndex: 'auditState',
            render: (auditState) => {
                const colorList = ['','orange','green','red']
                return <Tag color={colorList[auditState]}>{auditList[auditState]}</Tag>
            },
        },
        {
            title: '操作',
            render: (item) => {
                return <div>
                    {
                        item.auditState === 1 && <Button 
                        onClick={() => handleRevert(item)}>撤销</Button>
                    }
                    {
                        item.auditState === 2 && <Button danger 
                        onClick={()=>handlePublish(item)}>发布</Button>
                    }
                    {
                        item.auditState === 3 && <Button type='primary' 
                        onClick={() => handleUpdate(item)}>更新</Button>
                    }
                </div>
            },
        },
    ];
    // 撤销
    const handleRevert =(item)=>{
        setdataSource(dataSource.filter(items => items.id !== item.id))
        axios.patch(`/news/${item.id}`, {
            auditState: 0
        }).then(res => {
            notification.info({
                message: `通知`,
                description:
                    `你可以到草稿箱中查看你的新闻`,
                placement: 'bottomRight',
            });
        })
    }
    // 发布
    const handlePublish = (item) => {
        setdataSource(dataSource.filter(items => items.id !== item.id))
        axios.patch(`/news/${item.id}`, {
            publishState: 2,
            publishTime:Date.now(),
        }).then(res => {
            notification.info({
                message: `通知`,
                description:
                    `你可以到发布列表中查看你的新闻`,
                placement: 'bottomRight',
            });
            props.history.push(`/publish-manage/published`)
        })
    }
    // 更新/修改
    const handleUpdate=(item)=>{
        props.history.push(`/news-manage/update/${item.id}`)
    }

    return (
        <div>
            <Table dataSource={dataSource} columns={columns} pagination={{
                pageSize: 5,
            }} rowKey={item => item.id} />

        </div>
    )
}
